{% extends 'base.html' %}
{% load static %}

{% block title %}卡组构建器{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{% url 'home' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
    
    <div class="row">
        <!-- 左侧：卡组管理 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-layer-group"></i> 我的卡组</h5>
                    <button class="btn btn-primary btn-sm" id="createDeckBtn">
                        <i class="fas fa-plus"></i> 新建
                    </button>
                </div>
                <div class="card-body">
                    <div id="decksList">
                        <div class="text-center text-muted">
                            <i class="fas fa-spinner fa-spin"></i> 加载中...
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间：卡组编辑区域 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-edit"></i> 卡组编辑</h5>
                </div>
                <div class="card-body">
                    <div id="deckEditor" style="display: none;">
                        <!-- 卡组信息 -->
                        <div class="mb-3">
                            <label for="deckName" class="form-label">卡组名称</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="deckName" placeholder="输入卡组名称">
                                <button class="btn btn-outline-secondary" type="button" id="saveDeckBtn">
                                    <i class="fas fa-save"></i> 保存
                                </button>
                            </div>
                        </div>

                        <!-- 卡组状态 -->
                        <div class="mb-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card bg-light">
                                        <div class="card-body text-center">
                                            <h6 class="card-title">卡牌数量</h6>
                                            <h4 class="text-primary" id="cardCount">0/5</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-light">
                                        <div class="card-body text-center">
                                            <h6 class="card-title">5星卡牌</h6>
                                            <h4 class="text-warning" id="fiveStarCount">0/1</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-light">
                                        <div class="card-body text-center">
                                            <h6 class="card-title">状态</h6>
                                            <span class="badge bg-danger" id="deckStatus">无效</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 卡组中的卡牌 -->
                        <div class="mb-3">
                            <h6>卡组中的卡牌</h6>
                            <div id="deckCards" class="row">
                                <!-- 卡牌槽位 -->
                                <div class="col-md-6 mb-2">
                                    <div class="card card-slot" data-slot="1">
                                        <div class="card-body text-center">
                                            <i class="fas fa-plus text-muted"></i>
                                            <small class="text-muted">空槽位</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="card card-slot" data-slot="2">
                                        <div class="card-body text-center">
                                            <i class="fas fa-plus text-muted"></i>
                                            <small class="text-muted">空槽位</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="card card-slot" data-slot="3">
                                        <div class="card-body text-center">
                                            <i class="fas fa-plus text-muted"></i>
                                            <small class="text-muted">空槽位</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="card card-slot" data-slot="4">
                                        <div class="card-body text-center">
                                            <i class="fas fa-plus text-muted"></i>
                                            <small class="text-muted">空槽位</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="card card-slot" data-slot="5">
                                        <div class="card-body text-center">
                                            <i class="fas fa-plus text-muted"></i>
                                            <small class="text-muted">空槽位</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button class="btn btn-outline-danger" id="deleteDeckBtn">
                                <i class="fas fa-trash"></i> 删除卡组
                            </button>
                            <button class="btn btn-outline-info" id="duplicateDeckBtn">
                                <i class="fas fa-copy"></i> 复制卡组
                            </button>
                        </div>
                    </div>

                    <div id="noDeckSelected" class="text-center text-muted">
                        <i class="fas fa-layer-group fa-3x mb-3"></i>
                        <h5>选择一个卡组开始编辑</h5>
                        <p>或者创建一个新的卡组</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧：卡牌库 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-gem"></i> 我的卡牌</h5>
                </div>
                <div class="card-body">
                    <!-- 筛选器 -->
                    <div class="mb-3">
                        <input type="text" class="form-control form-control-sm" id="cardSearch" placeholder="搜索卡牌...">
                    </div>
                    <div class="mb-3">
                        <select class="form-select form-select-sm" id="starFilter">
                            <option value="">所有星级</option>
                            <option value="1">1星</option>
                            <option value="2">2星</option>
                            <option value="3">3星</option>
                            <option value="4">4星</option>
                            <option value="5">5星</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <select class="form-select form-select-sm" id="elementFilter">
                            <option value="">所有属性</option>
                            <option value="metal">金</option>
                            <option value="wood">木</option>
                            <option value="water">水</option>
                            <option value="fire">火</option>
                            <option value="earth">土</option>
                        </select>
                    </div>

                    <!-- 卡牌列表 -->
                    <div id="userCards" style="max-height: 400px; overflow-y: auto;">
                        <div class="text-center text-muted">
                            <i class="fas fa-spinner fa-spin"></i> 加载中...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新建卡组模态框 -->
<div class="modal fade" id="createDeckModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">创建新卡组</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="newDeckName" class="form-label">卡组名称</label>
                    <input type="text" class="form-control" id="newDeckName" placeholder="输入卡组名称">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmCreateDeck">创建</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentDeck = null;
let userCards = [];
let filteredCards = [];

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
    loadDecks();
    loadUserCards();
    
    // 绑定事件
    document.getElementById('createDeckBtn').addEventListener('click', showCreateDeckModal);
    document.getElementById('confirmCreateDeck').addEventListener('click', createDeck);
    document.getElementById('saveDeckBtn').addEventListener('click', saveDeck);
    document.getElementById('deleteDeckBtn').addEventListener('click', deleteDeck);
    document.getElementById('duplicateDeckBtn').addEventListener('click', duplicateDeck);
    
    // 筛选器事件
    document.getElementById('cardSearch').addEventListener('input', filterCards);
    document.getElementById('starFilter').addEventListener('change', filterCards);
    document.getElementById('elementFilter').addEventListener('change', filterCards);
});

// 加载卡组列表
async function loadDecks() {
    try {
        const response = await fetch('/api/decks/');
        const data = await response.json();
        
        // 处理分页格式的响应
        const decks = data.results || data;
        
        const container = document.getElementById('decksList');
        container.innerHTML = '';
        
        if (!decks || decks.length === 0) {
            container.innerHTML = '<div class="text-center text-muted">暂无卡组</div>';
            return;
        }
        
        decks.forEach(deck => {
            const deckItem = document.createElement('div');
            deckItem.className = 'card mb-2 deck-item';
            deckItem.dataset.deckId = deck.id;
            deckItem.innerHTML = `
                <div class="card-body py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title mb-1">${deck.name}</h6>
                            <small class="text-muted">${deck.total_cards}/5 张卡</small>
                        </div>
                        <span class="badge bg-${deck.is_valid ? 'success' : 'danger'}">${deck.is_valid ? '有效' : '无效'}</span>
                    </div>
                </div>
            `;
            
            deckItem.addEventListener('click', () => selectDeck(deck));
            container.appendChild(deckItem);
        });
        
    } catch (error) {
        console.error('加载卡组失败:', error);
        document.getElementById('decksList').innerHTML = '<div class="text-center text-danger">加载失败</div>';
    }
}

// 加载用户卡牌
async function loadUserCards() {
    try {
        const response = await fetch('/api/decks/user-cards/');
        userCards = await response.json();
        filteredCards = [...userCards];
        renderUserCards();
        
    } catch (error) {
        console.error('加载用户卡牌失败:', error);
        document.getElementById('userCards').innerHTML = '<div class="text-center text-danger">加载失败</div>';
    }
}

// 渲染用户卡牌
function renderUserCards() {
    const container = document.getElementById('userCards');
    container.innerHTML = '';
    
    if (filteredCards.length === 0) {
        container.innerHTML = '<div class="text-center text-muted">没有找到卡牌</div>';
        return;
    }
    
    filteredCards.forEach(card => {
        const cardItem = document.createElement('div');
        cardItem.className = 'card mb-2 user-card card-hover';
        cardItem.dataset.cardId = card.id;
        
        // 属性颜色映射
        const elementColors = {
            'metal': 'warning',
            'wood': 'success', 
            'water': 'info',
            'fire': 'danger',
            'earth': 'secondary'
        };
        
        cardItem.innerHTML = `
            <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="flex-grow-1">
                        <!-- 顶部信息栏 -->
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="badge bg-warning text-dark" style="font-size: 0.7rem;">
                                <i class="fas fa-star"></i> ${card.star_level}
                            </span>
                            <span class="badge bg-${elementColors[card.element] || 'primary'}" style="font-size: 0.7rem;">
                                ${getElementName(card.element)}
                            </span>
                        </div>
                        <!-- 卡牌名称 -->
                        <h6 class="card-title mb-1" style="font-size: 0.9rem; line-height: 1.2; font-weight: 600;">${card.name}</h6>
                    </div>
                    <button class="btn btn-primary btn-sm add-card-btn" data-card-id="${card.id}">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        `;
        
        // 绑定添加卡牌事件
        const addBtn = cardItem.querySelector('.add-card-btn');
        addBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            addCardToDeck(card.id);
        });
        
        // 绑定点击卡牌显示详情事件
        cardItem.addEventListener('click', (e) => {
            if (!e.target.closest('.add-card-btn')) {
                showCardDetail(card.id);
            }
        });
        
        container.appendChild(cardItem);
    });
}

// 筛选卡牌
function filterCards() {
    const search = document.getElementById('cardSearch').value.toLowerCase();
    const starFilter = document.getElementById('starFilter').value;
    const elementFilter = document.getElementById('elementFilter').value;
    
    filteredCards = userCards.filter(card => {
        const matchesSearch = card.name.toLowerCase().includes(search);
        const matchesStar = !starFilter || card.star_level.toString() === starFilter;
        const matchesElement = !elementFilter || card.element === elementFilter;
        
        return matchesSearch && matchesStar && matchesElement;
    });
    
    renderUserCards();
}

// 选择卡组
function selectDeck(deck) {
    currentDeck = deck;
    
    // 更新UI
    document.getElementById('deckEditor').style.display = 'block';
    document.getElementById('noDeckSelected').style.display = 'none';
    
    // 更新卡组信息
    document.getElementById('deckName').value = deck.name;
    updateDeckStatus(deck);
    renderDeckCards(deck);
    
    // 更新选中状态
    document.querySelectorAll('.deck-item').forEach(item => {
        item.classList.remove('border-primary');
    });
    document.querySelector(`[data-deck-id="${deck.id}"]`).classList.add('border-primary');
}

// 更新卡组状态
function updateDeckStatus(deck) {
    document.getElementById('cardCount').textContent = `${deck.total_cards}/5`;
    document.getElementById('fiveStarCount').textContent = `${getFiveStarCount(deck)}/1`;
    
    const statusBadge = document.getElementById('deckStatus');
    if (deck.is_valid) {
        statusBadge.textContent = '有效';
        statusBadge.className = 'badge bg-success';
    } else {
        statusBadge.textContent = '无效';
        statusBadge.className = 'badge bg-danger';
    }
}

// 获取5星卡牌数量
function getFiveStarCount(deck) {
    return deck.deck_cards.filter(card => card.card.star_level === 5).length;
}

// 渲染卡组中的卡牌
function renderDeckCards(deck) {
    const slots = document.querySelectorAll('.card-slot');
    
    // 清空所有槽位
    slots.forEach(slot => {
        slot.innerHTML = `
            <div class="card-body text-center">
                <i class="fas fa-plus text-muted"></i>
                <small class="text-muted">空槽位</small>
            </div>
        `;
        slot.classList.remove('has-card');
    });
    
    // 填充卡牌
    deck.deck_cards.forEach((deckCard, index) => {
        if (index < 5) {
            const slot = slots[index];
            slot.innerHTML = `
                <div class="card-body py-2">
                    <h6 class="card-title mb-1">${deckCard.card.name}</h6>
                    <small class="text-muted">
                        ${deckCard.card.star_level}星 · ${deckCard.card.element}
                    </small>
                    <div class="mt-2">
                        <button class="btn btn-danger btn-sm remove-card-btn" data-card-id="${deckCard.card.id}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            `;
            slot.classList.add('has-card');
            
            // 绑定移除卡牌事件
            const removeBtn = slot.querySelector('.remove-card-btn');
            removeBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                removeCardFromDeck(deckCard.card.id);
            });
        }
    });
}

// 显示创建卡组模态框
function showCreateDeckModal() {
    document.getElementById('newDeckName').value = '';
    new bootstrap.Modal(document.getElementById('createDeckModal')).show();
}

// 创建卡组
async function createDeck() {
    const name = document.getElementById('newDeckName').value.trim();
    if (!name) {
        showMessage('请输入卡组名称', 'error');
        return;
    }
    
    try {
        const response = await fetch('/api/decks/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ name: name })
        });
        
        if (response.ok) {
            const deck = await response.json();
            showMessage('卡组创建成功', 'success');
            bootstrap.Modal.getInstance(document.getElementById('createDeckModal')).hide();
            loadDecks();
            selectDeck(deck);
        } else {
            const error = await response.json();
            showMessage('创建失败：' + error.error, 'error');
        }
    } catch (error) {
        showMessage('创建失败：网络错误', 'error');
    }
}

// 保存卡组
async function saveDeck() {
    if (!currentDeck) return;
    
    const name = document.getElementById('deckName').value.trim();
    if (!name) {
        showMessage('请输入卡组名称', 'error');
        return;
    }
    
    try {
        const response = await fetch(`/api/decks/${currentDeck.id}/`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ name: name })
        });
        
        if (response.ok) {
            showMessage('卡组保存成功', 'success');
            loadDecks();
        } else {
            const error = await response.json();
            showMessage('保存失败：' + error.error, 'error');
        }
    } catch (error) {
        showMessage('保存失败：网络错误', 'error');
    }
}

// 添加卡牌到卡组
async function addCardToDeck(cardId) {
    if (!currentDeck) {
        showMessage('请先选择一个卡组', 'error');
        return;
    }
    
    try {
        const response = await fetch(`/api/decks/${currentDeck.id}/cards/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ card_id: cardId, quantity: 1 })
        });
        
        if (response.ok) {
            const data = await response.json();
            showMessage('卡牌添加成功', 'success');
            currentDeck = data.deck;
            updateDeckStatus(currentDeck);
            renderDeckCards(currentDeck);
            loadDecks(); // 刷新卡组列表
        } else {
            const error = await response.json();
            showMessage('添加失败：' + error.error, 'error');
        }
    } catch (error) {
        showMessage('添加失败：网络错误', 'error');
    }
}

// 从卡组移除卡牌
async function removeCardFromDeck(cardId) {
    if (!currentDeck) return;
    
    try {
        const response = await fetch(`/api/decks/${currentDeck.id}/cards/${cardId}/`, {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        });
        
        if (response.ok) {
            const data = await response.json();
            showMessage('卡牌移除成功', 'success');
            currentDeck = data.deck;
            updateDeckStatus(currentDeck);
            renderDeckCards(currentDeck);
            loadDecks(); // 刷新卡组列表
        } else {
            const error = await response.json();
            showMessage('移除失败：' + error.error, 'error');
        }
    } catch (error) {
        showMessage('移除失败：网络错误', 'error');
    }
}

// 删除卡组
async function deleteDeck() {
    if (!currentDeck) return;
    
    if (!confirm('确定要删除这个卡组吗？')) return;
    
    try {
        const response = await fetch(`/api/decks/${currentDeck.id}/`, {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        });
        
        if (response.ok) {
            showMessage('卡组删除成功', 'success');
            currentDeck = null;
            document.getElementById('deckEditor').style.display = 'none';
            document.getElementById('noDeckSelected').style.display = 'block';
            loadDecks();
        } else {
            const error = await response.json();
            showMessage('删除失败：' + error.error, 'error');
        }
    } catch (error) {
        showMessage('删除失败：网络错误', 'error');
    }
}

// 复制卡组
async function duplicateDeck() {
    if (!currentDeck) return;
    
    try {
        const response = await fetch(`/api/decks/${currentDeck.id}/duplicate/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        });
        
        if (response.ok) {
            const data = await response.json();
            showMessage('卡组复制成功', 'success');
            loadDecks();
            selectDeck(data.deck);
        } else {
            const error = await response.json();
            showMessage('复制失败：' + error.error, 'error');
        }
    } catch (error) {
        showMessage('复制失败：网络错误', 'error');
    }
}

// 工具函数
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 获取属性名称
function getElementName(element) {
    const elementNames = {
        'metal': '金',
        'wood': '木',
        'water': '水',
        'fire': '火',
        'earth': '土'
    };
    return elementNames[element] || element;
}

// 获取稀有度名称
function getRarityName(rarity) {
    const rarityNames = {
        'common': '普通',
        'rare': '稀有',
        'epic': '史诗',
        'legendary': '传说'
    };
    return rarityNames[rarity] || rarity;
}

// 显示卡牌详情
function showCardDetail(cardId) {
    const card = userCards.find(c => c.id === cardId);
    if (!card) return;
    
    // 创建模态框
    const modalHtml = `
        <div class="modal fade" id="cardDetailModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">卡牌详情</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="text-center mb-3">
                                    <div class="card-placeholder bg-light rounded" style="height: 200px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-gem fa-3x text-muted"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h4 class="mb-3">${card.name}</h4>
                                <div class="mb-2">
                                    <span class="badge bg-warning text-dark me-2">
                                        <i class="fas fa-star"></i> ${card.star_level}星
                                    </span>
                                    <span class="badge bg-${getElementColor(card.element)} me-2">
                                        ${getElementName(card.element)}
                                    </span>
                                    <span class="badge bg-${getRarityColor(card.rarity)}">
                                        ${getRarityName(card.rarity)}
                                    </span>
                                </div>
                                <div class="mb-2">
                                    <strong>攻击力:</strong> ${card.attack_power}
                                </div>
                                <div class="mb-2">
                                    <strong>拥有数量:</strong> ${card.user_quantity || 1}
                                </div>
                                <div class="mb-3">
                                    <strong>描述:</strong><br>
                                    <small class="text-muted">${card.description}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="addCardToDeck(${card.id}); bootstrap.Modal.getInstance(document.getElementById('cardDetailModal')).hide();">
                            <i class="fas fa-plus"></i> 添加到卡组
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // 移除已存在的模态框
    const existingModal = document.getElementById('cardDetailModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // 添加新模态框
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // 显示模态框
    const modal = new bootstrap.Modal(document.getElementById('cardDetailModal'));
    modal.show();
}

// 获取属性颜色
function getElementColor(element) {
    const elementColors = {
        'metal': 'warning',
        'wood': 'success', 
        'water': 'info',
        'fire': 'danger',
        'earth': 'secondary'
    };
    return elementColors[element] || 'primary';
}

// 获取稀有度颜色
function getRarityColor(rarity) {
    const rarityColors = {
        'common': 'secondary',
        'rare': 'primary',
        'epic': 'info',
        'legendary': 'warning'
    };
    return rarityColors[rarity] || 'secondary';
}

function showMessage(message, type) {
    // 简单的消息提示实现
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alert = document.createElement('div');
    alert.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
    alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alert);
    
    setTimeout(() => {
        if (alert.parentNode) {
            alert.parentNode.removeChild(alert);
        }
    }, 3000);
}
</script>

<style>
.deck-item {
    cursor: pointer;
    transition: all 0.2s;
}

.deck-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.deck-item.border-primary {
    border-color: #0d6efd !important;
}

.user-card {
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #dee2e6;
}

.user-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-hover {
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.card-slot {
    min-height: 100px;
    border: 2px dashed #dee2e6;
    transition: all 0.2s;
}

.card-slot.has-card {
    border: 2px solid #0d6efd;
    border-style: solid;
}

.card-slot:hover {
    border-color: #0d6efd;
}

.add-card-btn {
    opacity: 0;
    transition: opacity 0.2s;
}

.user-card:hover .add-card-btn {
    opacity: 1;
}

/* 属性颜色样式 */
.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-success {
    background-color: #198754 !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}
</style>
{% endblock %}
